<!-- 举报列表 -->
<template>
    <!-- 页头 -->
    <Header/>
     <!-- 服务导航 -->
    <ServiceNav/>
    <div class="main">
        <div class="main-container wrap backgroundModule main-fullScreen">
            <div class="reportListModule" >
                <el-table :data="state.pageView.records" stripe class="dataTable">
                    <el-table-column prop="reason" label="理由" align="center" ></el-table-column>
                    <el-table-column prop="reportTypeName" label="分类" align="center" ></el-table-column>
                    <el-table-column label="图片" align="center">
                        <template #default="scope">
                            <span v-for="imageInfo in scope.row.imageInfoList" class="image-preview">
                                <!-- 本地存储 -->
                                <el-image v-if="$store.state.fileStorageSystem == 0" preview-teleported style="width: 60px; height: 60px" fit="cover" :src="imageInfo.path+imageInfo.name" :preview-src-list="[imageInfo.path+imageInfo.name]" hide-on-click-modal ></el-image>
                                <!-- SeaweedFS存储 使用nginx image_filter的缩略图处理功能 -->
                                <el-image v-if="$store.state.fileStorageSystem == 10" preview-teleported style="width: 60px; height: 60px" fit="cover" :src="imageInfo.path+imageInfo.name+'?width=60'" :preview-src-list="[imageInfo.path+imageInfo.name]" hide-on-click-modal ></el-image>
                                <!--  MinIO存储 使用nginx image_filter的缩略图处理功能 -->
                                <el-image v-if="$store.state.fileStorageSystem == 20" preview-teleported style="width: 60px; height: 60px" fit="cover" :src="imageInfo.path+imageInfo.name+'?width=60'" :preview-src-list="[imageInfo.path+imageInfo.name]" hide-on-click-modal ></el-image>
                                <!-- 阿里云OSS存储 -->
                                <el-image v-if="$store.state.fileStorageSystem == 30" preview-teleported style="width: 60px; height: 60px" fit="cover" :src="imageInfo.path+imageInfo.name+'?x-oss-process=image/resize,w_60'" :preview-src-list="[imageInfo.path+imageInfo.name]" hide-on-click-modal ></el-image>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" width="120">
                        <template #header>
                            被举报内容
                        </template>
                        <template #default="scope">
                            <router-link v-if="scope.row.module == 10" tag="div" class="link" :to="{path: '/thread', query:{ topicId : scope.row.parameterId, reportModule:scope.row.module}}">查看话题</router-link>
                            <router-link v-if="scope.row.module == 20" tag="div" class="link" :to="{path: '/thread', query:{ topicId : scope.row.extraParameterId,commentId:scope.row.parameterId, reportModule:scope.row.module}}">查看评论</router-link>
                            <router-link v-if="scope.row.module == 30" tag="div" class="link" :to="{path: '/thread', query:{ topicId : scope.row.extraParameterId.split('-')[0], commentId:scope.row.extraParameterId.split('-')[1], replyId:scope.row.parameterId, reportModule:scope.row.module}}">查看评论回复</router-link>
                            <router-link v-if="scope.row.module == 40" tag="div" class="link" :to="{path: '/question', query:{ questionId : scope.row.parameterId, reportModule:scope.row.module}}">查看问题</router-link>
                            <router-link v-if="scope.row.module == 50" tag="div" class="link" :to="{path: '/question', query:{ questionId : scope.row.extraParameterId,answerId:scope.row.parameterId, reportModule:scope.row.module}}">查看答案</router-link>
                            <router-link v-if="scope.row.module == 60" tag="div" class="link" :to="{path: '/question', query:{ questionId : scope.row.extraParameterId.split('-')[0], answerId:scope.row.extraParameterId.split('-')[1], replyId:scope.row.parameterId, reportModule:scope.row.module}}">查看答案回复</router-link>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" align="center" width="160">
                        <template #default="scope">
                            <el-tag effect="dark"  v-if="scope.row.status==10" class="tag-wrapper">待处理</el-tag>
                            <el-tag effect="dark"  v-if="scope.row.status==40" type="warning" class="tag-wrapper">投诉失败</el-tag>
                            <el-tag effect="dark"  v-if="scope.row.status==50" type="success" class="tag-wrapper">投诉成功</el-tag>
                            <el-tag effect="dark"  v-if="scope.row.status==1010" type="danger" class="tag-wrapper">待处理【用户删除】</el-tag>
                            <el-tag effect="dark"  v-if="scope.row.status==1040" type="danger" class="tag-wrapper">投诉失败【用户删除】</el-tag>
                            <el-tag effect="dark"  v-if="scope.row.status==1050" type="danger" class="tag-wrapper">投诉成功【用户删除】</el-tag>
                            <el-tag effect="dark"  v-if="scope.row.status==100010" type="danger" class="tag-wrapper">待处理【员工删除】</el-tag>
                            <el-tag effect="dark"  v-if="scope.row.status==100040" type="danger" class="tag-wrapper">投诉失败【员工删除】</el-tag>
                            <el-tag effect="dark"  v-if="scope.row.status==100050" type="danger" class="tag-wrapper">投诉成功【员工删除】</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="处理结果" align="center" width="180">
                        <template #default="scope">
                            <div>{{scope.row.processResult}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="举报时间 / 处理完成时间" align="center" width="200">
                        <template #default="scope">
                            <div>{{scope.row.postTime}}</div>
                            <div v-if="scope.row.processCompleteTime" class="processCompleteTime">{{scope.row.processCompleteTime}}</div>
                            
                        </template>
                    </el-table-column>
                    <template #empty>
                        <div v-if="!state.loading">暂无数据</div>
                        <div v-if="state.loading"></div>
                    </template>
                </el-table>

                <el-skeleton :loading="state.loading"></el-skeleton>
                <div class="page" v-if="state.isShowPage">
					<el-pagination background @current-change="handlePage" :current-page="state.currentpage"  :page-size="state.maxresult" :total="state.totalrecord" layout="total, prev, pager, next,jumper" />
				</div>
                
            </div>
        </div>
    </div>
    <!-- 页脚 -->
    <Footer/>
</template>


<script lang="ts" setup>
    import { getCurrentInstance, ComponentInternalInstance, reactive, onMounted, computed} from 'vue'
    import { useMeta} from 'vue-meta'
    import { appStore } from "@/store";
    import { onBeforeRouteUpdate, useRouter } from 'vue-router'
    import Header from '@/components/Header.vue'
    import { AxiosResponse } from 'axios'
    import { PageView,Report } from "@/types/index";

    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    const store = appStore();
    const router = useRouter();


    
    //html页元信息
    const { meta } = useMeta(
        computed(() => ({ 
            title:  '举报列表 - ' + store.state.title,
            meta: [
                {
                    name: 'keywords',
                    content: '举报列表 - ' + store.state.title
                },{
                    name: "description",
                    content: '举报列表 - ' + store.state.title
                }
            ]
        }))
    )


    const state = reactive({
        pageView: {} as PageView<Report>,//分页
        totalrecord : 0, //总记录数
		currentpage : 1, //当前页码
        totalpage : 1, //总页数
        maxresult: 12, //每页显示记录数     

        loading:true,//是否显示骨架屏
        isShowPage:false//是否显示分页
    });

    //查询举报列表
    const queryReportList = (page: number) => {
        proxy?.$axios({
            url: '/user/control/reportList',
            method: 'get',
            params:  { 
                page: page
            },
            //showLoading: false,//是否显示加载图标
            loadingMask:false,// 是否显示遮罩层
        })
        .then((response: AxiosResponse) => {
            return response?.data
        })
        .then((data: PageView<Report>) => {
            state.loading = false;//关闭骨架屏
            state.pageView = data;

            state.totalrecord = parseInt(state.pageView.totalrecord);//服务器返回的long类型已转为String类型
            state.currentpage = state.pageView.currentpage;
            state.totalpage = parseInt(state.pageView.totalpage);//服务器返回的long类型已转为String类型
            state.maxresult = state.pageView.maxresult;


            state.isShowPage = true;//显示分页栏
        })
        .catch((error: any) =>{
            console.log(error);
        });
    }
    

    //分页
    const handlePage = (page: number) => {
		router.push({
            path: '/user/control/reportList', 
            query:{page : page}
		});
        router.afterEach(() => {
            window.scrollTo(0,0); //切换路由之后滚动条始终在最顶部
        });
	}



    //导航守卫
    onBeforeRouteUpdate((to, from, next) => {
        if(to.name == 'reportList'){
            let page:number = 1;
            if(to.query.page != undefined){
                page = parseInt(to.query.page as string);
            }
            queryReportList(page);
        }
        
        next();
    });
    
    onMounted(() => {
        let page:number = router.currentRoute.value.query.page != undefined ? parseInt(router.currentRoute.value.query.page as string) :1;
        queryReportList(page);

    }) 
    

</script>

<style scoped lang="scss">
    .reportListModule{
        background: #fff;
        padding-right:8px;
        padding-left:8px;
        padding-top:8px;
        padding-bottom: 30px;
        .image-preview{
            margin-left: 5px;
            margin-bottom: 5px;
        }
        .processCompleteTime{
            color: #67C23A;
        }
        .link{
            color: $color-blue-60;
        }
        .page{
            margin-top: 30px;
            display: flex;
            justify-content: flex-end;
        }
    }

</style>
